<!--
 * @Descripttion: 人员表单
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-29 21:06:21
-->
<template>
  <DileDrawer
    v-model="personForm.visible"
    :loading="personForm.loading"
    size="60%"
    @sure="hanldeSure"
  >
    <template #header>
      <span>{{
        $t(`table.btnArr.${!personForm.formData.id ? "add" : "edit"}`)
      }}</span>
    </template>
    <template #default>
      <el-form
        ref="formRef"
        :model="personForm.formData"
        :rules="formRules"
        label-width="5rem"
        size="large"
        status-icon
      >
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.personArr.name')"
            prop="name"
          >
            <el-input
              v-model="personForm.formData.name"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.personArr.jobNumber')"
            prop="code"
          >
            <el-input
              v-model="personForm.formData.code"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.personArr.account')"
            prop="account"
          >
            <el-input
              v-model="personForm.formData.account"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('page.organizeManageArr.personArr.sex')">
            <el-select
              v-model="personForm.formData.sex"
              :placeholder="$t('common.select')"
            >
              <el-option value="男" />
              <el-option value="女" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.departmentArr.department')"
            prop="departmentId"
            :validate-status="
              !!personForm.formData.departmentId ? 'success' : ''
            "
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="personForm.formData.departmentId"
              :selectType="selectTypeEnum.depart"
              :cacheLabel="personForm.formData.extJson.departmentName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.postmentArr.post')"
            prop="jobPostId"
            :validate-status="!!personForm.formData.jobPostId ? 'success' : ''"
          >
            <!-- 输入框选择对象 -->
            <DileInputSelectItem
              v-model="personForm.formData.jobPostId"
              :selectType="selectTypeEnum.post"
              :cacheLabel="personForm.formData.extJson.jobPostName"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.personArr.telephone')"
            prop="telephone"
          >
            <el-input
              v-model="personForm.formData.telephone"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('page.organizeManageArr.personArr.emailAddress')"
            prop="emailAddress"
          >
            <el-input
              v-model="personForm.formData.emailAddress"
              :placeholder="$t('common.enter')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('common.status')">
            <el-radio-group v-model="personForm.formData.status">
              <el-radio :label="true">{{ $t("table.btnArr.enable") }}</el-radio>
              <el-radio :label="false">{{
                $t("table.btnArr.disEnable")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('common.remark')">
            <el-input
              v-model="personForm.formData.remark"
              :rows="5"
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-form>
    </template>
  </DileDrawer>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, computed, nextTick, inject } from "vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { ElNotification } from "element-plus";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
import DileDrawer from "@/components/dile-drawer/index.vue";
import Dile_APi from "@/api";
import Dile_Methods from "@/utils/methods";

let { t } = useI18n();
const emit = defineEmits(["refresh"]);
/**
 * @Author: xzh
 * @Descripttion: 人员管理参数
 * @Param:
 */
let personmentParam = reactive<object_Inf>(inject("personmentParam") || {});

/**
 * @Author: xzh
 * @Descripttion: 表单默认数据
 * @Param:
 */
let defaultData = () => {
  let { id: departmentId, name: departmentName } =
    personmentParam?.selectNode || {};
  return {
    id: 0,
    name: "", //姓名
    code: "", //工号
    account: "", //用户名
    sex: "男", //性别
    departmentId, //部门
    jobPostId: null, //岗位
    telephone: "", //手机
    emailAddress: "", //邮箱
    status: true, //状态
    remark: "", //备注
    extJson: {
      departmentName, //部门名称
      jobPostName: "", //岗位名称
    },
  };
};
/**
 * @Author: xzh
 * @Descripttion: 人员表单参数
 * @Param:
 */
let personForm = reactive<object_Inf>({
  visible: false,
  loading: false,
  //表单数据
  formData: defaultData(),
});

/**
 * @Author: xzh
 * @Descripttion: 表单实例
 * @Param:
 */
let formRef = ref<any>(null);

/**
 * @Author: xzh
 * @Descripttion:表单验证规则
 * @Param:
 * @param {*} computed
 */
let formRules = computed((): any => {
  return reactive({
    departmentId: [
      {
        required: true,
        message:
          t("common.select") +
          t("page.organizeManageArr.departmentArr.department"),
        trigger: "change",
      },
    ],
    jobPostId: [
      {
        required: true,
        message:
          t("common.select") + t("page.organizeManageArr.postmentArr.post"),
        trigger: "change",
      },
    ],
    code: [
      {
        required: true,
        message:
          t("common.enter") + t("page.organizeManageArr.personArr.jobNumber"),
        trigger: "change",
      },
    ],
    account: [
      {
        required: true,
        message:
          t("common.enter") + t("page.organizeManageArr.personArr.account"),
        trigger: "change",
      },
    ],
    name: [
      {
        required: true,
        message: t("common.enter") + t("page.organizeManageArr.personArr.name"),
        trigger: "change",
      },
    ],
    telephone: [
      {
        validator: (rule: any, value: any, callback: any) => {
          //验证手机号
          Dile_Methods.validator_phone(value) || !value
            ? callback()
            : callback(new Error(t("common.message.pleaseEnterRightPhone")));
        },
        trigger: "change",
      },
    ],
    emailAddress: [
      {
        validator: (rule: any, value: any, callback: any) => {
          //验证邮箱
          Dile_Methods.validator_email(value) || !value
            ? callback()
            : callback(new Error(t("common.message.pleaseEnterRightEmail")));
        },
        trigger: "change",
      },
    ],
  });
});

/**
 * @Author: xzh
 * @Descripttion:初始化加载
 * @Param:
 * @param {*} id 人员主键
 */
let init = async (id: number) => {
  let { visible, loading } = toRefs(personForm);
  visible.value = true;
  await nextTick();
  try {
    loading.value = true;
    //加载表单数据
    await initFormData(id);
  } finally {
    loading.value = false;
  }
};

/**
 * @Author: xzh
 * @Descripttion: 加载表单数据
 * @Param:
 */
let initFormData = async (id: number) => {
  let data: object_Inf = !!id
    ? await Dile_APi.getUserInfoById(id)
    : defaultData();
  Object.assign(personForm.formData, data);
};

/**
 * @Author: xzh
 * @Descripttion: 保存事件
 * @Param:
 */
let hanldeSure = async () => {
  let { formData, loading, visible } = toRefs(personForm),
    valid = await formRef.value.validate();
  if (!valid || !!loading.value) {
    return false;
  }
  try {
    loading.value = true;
    await Dile_APi.saveUser(formData.value);
    //触发刷新回调
    emit("refresh");
    //提示成功
    ElNotification({
      message: t("common.message.OperationSuccess"),
      type: "success",
    });
    //关闭弹框
    visible.value = false;
  } finally {
    loading.value = false;
  }
};

defineExpose({
  init,
});
</script>
<style lang="scss" scoped></style>
